<template>
  <div class="app-container">
    <div class="search">
      <el-form
        ref="queryForm"
        class="queryForm"
        :model="formInline"
        label-width="auto"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item
              label="企业名称"
              class="formItem"
            >
              <el-input
                v-model="formInline.qymc"
                placeholder="请输入企业名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="企业评级"
              class="formItem"
            >
              <el-select
                v-model="formInline.level"
                placeholder="请选择企业评级"
                clearable
                class="w100"
              >
                <el-option
                  v-for="(dict, index) in levelOptions"
                  :label="dict.label"
                  :value="dict.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label='社会统一信用代码'
              class="formItem"
            >
              <el-input
                v-model="formInline.shtyxydm"
                placeholder="请输入社会统一信用代码"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
              >搜索</el-button>
              <el-button
                size="small"
                icon="el-icon-refresh"
                @click="handleReset"
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="list">
        <el-button
          type="primary"
          class="add"
          size="small"
          icon="el-icon-download"
          :disabled="tableData.length == 0"
          @click="exportExcel"
        >导出</el-button>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{background:'#eff7fd'}"
          ref="table"
          highlight-current-row
          v-loading="loading"
          :row-key="rowKey"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="企业名称"
            prop="qymc"
            align="center"
          ></el-table-column>
          <el-table-column
            label="社会统一信用代码"
            prop="shtyxydm"
            align="center"
            width="300px"
          ></el-table-column>
          <el-table-column
            label="评分模型"
            prop="modelName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="评分"
            prop="score"
            align="center"
          ></el-table-column>
          <el-table-column
            label="企业评级"
            prop="level"
            align="center"
            :formatter="typeFormatter"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.stop="handleCheck(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="showFlag"
      width="50%"
      class="dialog"
    >
      <div class="message">
        <div class="module">
          <el-tabs v-model="active">
            <el-tab-pane
              label="企业信息"
              name="first"
            >
              <table class="detailtable">
                <tr>
                  <td width="15%">企业名称</td>
                  <td>{{detailList.companyBaseInfo.qymc}}</td>
                  <td width="15%">统一社会信用代码</td>
                  <td>{{detailList.companyBaseInfo.shtyxydm}}</td>
                </tr>
                <tr>
                  <td width="15%">注册时间</td>
                  <td>{{detailList.companyBaseInfo.clrq}}</td>
                  <td width="15%">注册资金</td>
                  <td>{{detailList.companyBaseInfo.zczb}}</td>
                </tr>
                <tr>
                  <td width="15%">所属行业</td>
                  <td>{{detailList.companyBaseInfo.sshy}}</td>
                  <td width="15%">所属区域</td>
                  <td>{{detailList.companyBaseInfo.ssqu}}</td>
                </tr>
                <tr>
                  <td width="15%">企业类型</td>
                  <td v-if="detailList.companyBaseInfo.qylx">{{detailList.companyBaseInfo.qylx}}</td>
                  <td v-else></td>
                  <td width="15%">联系方式</td>
                  <td>{{detailList.companyBaseInfo.dh}}</td>
                </tr>
                <tr>
                  <td width="15%">注册地址</td>
                  <td colspan="3">{{detailList.companyBaseInfo.zs}}</td>

                </tr>
              </table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="module">
          <el-tabs v-model="active">
            <el-tab-pane
              label="评分信息"
              name="first"
            >
              <table class="detailtable">
                <tr class="msg">
                  <td>评分指标</td>
                  <td>指标权重</td>
                  <td>得分</td>
                </tr>
                <tr class="msg">
                  <td>{{detailList.mapDetail.indicatorName}}</td>
                  <td>{{detailList.mapDetail.weight}}</td>
                  <td>{{detailList.mapDetail.examination}}</td>
                </tr>
                <tr class="right">
                  <td
                    v-if="detailList.level"
                    colspan="3"
                  >最终得分:{{detailList.score}}分　企业评级:{{detailList.level | filterQylx(levelOptions)}}　{{detailList.meaning}}　<i
                      class="el-icon-question wenhao"
                      @click="openScore(detailList)"
                    ></i></td>
                  <td
                    v-else
                    colspan="3"
                  ></td>
                </tr>
              </table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-dialog
        width="20%"
        title="查看评分含义"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-table
          :data="scoreList"
          border
          style="width: 100%"
          :header-cell-style="{background:'#eff7fd'}"
          ref="table1"
          highlight-current-row
        >
          <el-table-column
            label="得分区间"
            prop="score"
            align="center"
          ></el-table-column>
          <el-table-column
            label="企业评级"
            prop="level"
            align="center"
            :formatter="typeFormatter"
          ></el-table-column>
          <el-table-column
            label="评级含义"
            prop="meaning"
            align="center"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import {
  getScoringLevel,
  getScoringDetail,
  getScoringScoreList,
  exportScoringLevel,
} from '@/api/gradManage.js'
import { getField } from '@/api/user.js'
export default {
  data() {
    return {
      // 搜索表单
      formInline: {},
      //列表信息
      tableData: [],
      //选中列表信息
      selectList: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      levelOptions: [],
      showFlag: false,
      //详情
      detailList: {
        companyBaseInfo: {},
        mapDetail: {},
      },
      //企业类型
      qylxList: [],
      //评分定义详情
      scoreList: [],
      active: 'first',
      innerVisible: false,
    }
  },
  created() {
    let params = {
      page: 1,
      size: 100,
      code: 'LEVEL',
    }
    getField(params).then((res) => {
      if (res.status) {
        this.levelOptions = res.data.records.map((item) => {
          return { label: item.fieldName, value: item.fieldCode }
        })
      }
    })
    let params1 = {
      page: 1,
      size: 100,
      code: 'QYLX',
    }
    getField(params1).then((res) => {
      if (res.status) {
        this.qylxList = res.data.records.map((item) => {
          return { label: item.fieldName, value: item.fieldCode }
        })
      }
    })

    this.handleSearch()
  },
  filters: {
    filterQylx(val, options) {
      if (!val) return ''
      let list = options.filter((item) => item.value == val)
      if (list.length > 0) {
        return list[0].label
      }
    },
  },
  methods: {
    //搜索
    handleSearch() {
      let formLine = this.formInline
      let params = {
        ...formLine,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      this.loading = true
      getScoringLevel(params).then((res) => {
        if (res.status) {
          this.loading = false
          this.tableData = res.data.records
          this.total = Number(res.data.total)
        }
      })
    },
    sizeChange(val) {
      this.pageSize = val
      this.handleSearch()
    },
    pageChange(val) {
      this.pageNum = val
      this.handleSearch()
    },
    //重置
    handleReset() {
      this.formInline = {}
      this.handleSearch()
    },
    handleSelectionChange(row) {
      this.selectList = row
    },
    rowKey(row) {
      return row.id
    },
    handleCheck(row) {
      getScoringDetail({ id: row.id }).then((res) => {
        if (res.status) {
          this.showFlag = true
          this.detailList = res.data
        }
      })
    },
    typeFormatter(r, c, v, i) {
      let list = this.levelOptions.filter((item) => item.value == v)
      return list.length > 0 ? list[0].label : v
    },
    openScore(row) {
      let { orgId, modelName } = row
      getScoringScoreList({ orgId, modelName }).then((res) => {
        this.innerVisible = true
        this.scoreList = res.data.map((item) => {
          return {
            score: `${item.minValue}——${item.maxValue}`,
            level: String(item.level),
            meaning: item.meaning,
          }
        })
      })
    },
    //导出
    exportExcel() {
      let params = {
        qymc: null,
        shtyxydm: null,
        level: null,
        list: [],
      }
      if (this.selectList.length != 0) {
        // 选中导出
        params.list = this.selectList.map((item) => item.id)

        this.$confirm('是否确认导出选中项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(function () {
            return exportScoringLevel(params)
          })
          .then((res) => {
            this.download({ msg: res, fileName: '企业评分' })
          })
          .catch(function () {})
      } else {
        params = {
          qymc: this.formInline.qymc || null,
          shtyxydm: this.formInline.shtyxydm || null,
          level: this.formInline.level || null,
          list: [],
        }
        // 全部导出
        this.$confirm('是否确认全部导出?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(function () {
            return exportScoringLevel(params)
          })
          .then((res) => {
            this.download({ msg: res, fileName: '企业评分' })
          })
          .catch(function () {})
      }
    },
  },
}
</script>

<style scoped lang="scss">
.search {
  padding: 20px 0 20px 20px;
  background:#fff;
}
.list {
  .add {
    margin-bottom: 10px;
  }
}
.formItem {
  width: 100%;
  /deep/.el-form-item__content {
    width: calc(100% - 125px);
    /deep/.el-select,
    /deep/.el-cascader {
      width: 100%;
    }
    .w100 {
      width: 100% !important;
    }
  }
}
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.dialog-footer {
  text-align: center;
}

/deep/.el-dialog__body {
  padding-bottom: 20px;
}
.detailtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: #e5e5e5 solid 1px;
}
.detailtable tr {
  width: 100%;
}
.detailtable td {
  padding: 8px 10px;
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  color: #434343;
  border: #e5e5e5 solid 1px;
}
.detailtable .msg td {
  text-align: center;
}
.detailtable .right td {
  text-align: right;
}
.detailtable td {
  font-weight: normal;
  background-color: #fff;
}
.detailtable td {
  word-break: break-all;
}
.wenhao {
  color: rgb(17, 114, 224);
}
.wenhao:hover {
  cursor: pointer;
}
</style>